<template>
	<view style="background: #f5f5f9;">
		<view id="myOrderId" class="app-height myOrder connaught-style">
		    <view class="tabs" style="display: flex; justify-content: center;">
		        <view class="item" :class="[status==0?'active':'']" @click="tabsClick(0)">全部<view class="span"></view></view>
		        <view class="item" :class="[status==1?'active':'']" @click="tabsClick(1)">匹配中<view class="span"></view></view>
		        <view class="item" :class="[status==2?'active':'']" @click="tabsClick(2)">对接中<view class="span"></view></view>
		        <view class="item" :class="[status==3?'active':'']" @click="tabsClick(3)">已完成<view class="span"></view></view>
		    </view>
			<scroll-view @scroll="scroll" @scrolltolower="onRefresh"  :scroll-top="scrollTop" scroll-y class="scroll-view">
				<view class="order-module">
					<view class="orer-data" v-for="item in orderList" @click="toDetail(item.id)">
						<text class="blue"></text>
						<view class="" v-if="item.classifyName == null">
							<image class="rz" v-show="item.ifAttestation  == 1" src="https://m.nocexpo.com/statics/js/modules/h5/img/renzheng.png"  />
							<image class="vip" v-show="item.ifMember == 1" :src="imgUrl + '/statics/js/modules/applet/img/vipp.png'" />
							<text class="caigou">采购线索：{{item.title}}</text>
							<image v-if="item.demandState == 1" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/pipeizhong.png" />
							<image v-else-if="item.demandState == 2" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/duijiezhong.png"/>
							<image v-else-if="item.demandState == 3" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/chenggong.png"/>
							<image v-else-if="item.demandState == 4" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/yicaigou.png"/>
						</view>
						<view class="left" v-else>
							<image class="rz" v-show="item.ifAttestation  == 1" src="https://m.nocexpo.com/statics/js/modules/h5/img/renzheng.png"  />
							<text class="caigou">采购线索：{{item.title}}</text>
							<image v-if="item.demandState == 1" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/pipeizhong.png" />
							<image v-else-if="item.demandState == 2" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/duijiezhong.png"/>
							<image v-else-if="item.demandState == 3" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/chenggong.png"/>
							<image v-else-if="item.demandState == 4" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/yicaigou.png"/>
						</view>
						<view class="tags">
							<view @click="goTagNews(item1)" class="t" v-for="(item1,index) in item.tagList" v-show="index < 3" >#{{item1.tagName}}</view>
						</view>
						<view class="attrs">
							<text  >ID:{{item.id}}</text>
							<text  >{{item.auditAt}}</text>
						</view>
						</view>
				</view>
					<view class="wu" v-if="orderList.length==0" style="width: 344rpx; height: 238rpx; margin: 60rpx auto;">
						<image src="https://m.nocexpo.com/statics/js/modules/h5/img/jiedan.png" style="width: 344rpx; height: 238rpx;" mode="" ></image>
						<view class="wu-wz" style="width: 344rpx; height: 238rpx; text-align: center; color: #A1A0A0; font-size: 28rpx;"  >
							{{str}}
						</view>
					</view>
			</scroll-view>	
				<hint ref="hint"></hint>
		</view>
	</view>
</template>

<script>
	import indexApi from '@/utils/request/index.js';
	import myjiedan from '@/api/myjiedan.js'
	import commonApi from '@/utils/commonMethod.js';
	export default {
		data() {
			return {
				search: {
					page: 1,
					limit: 10,
				},
				loading: true,
				noMore: false,
				noData: false,
				status: 0,
				orderList:[],
				noMoreShow: false,
				scrollTop: 0,
				totalPage:0,
				str:"还没有接单记录哦~",
				currentUser:{},
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
				imgUrl: indexApi.baseUrl,
			}
		},
		async onLoad(options) {
			if(options.status){
				this.status = options.status
			}
			
		},
		onShow(){
			setTimeout(()=> {
				if (getApp().globalData.onShow) {
					getApp().globalData.onShow = 0;
					console.log("demo前后台切换之切到前台")
				}
				else {
					console.log("demo页面被切换显示")
					this.startTime = +new Date();
				}
			}, 100);
		},
		onHide(){
			setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		onUnload(){
				setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		async mounted(){
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath;
			const currentUser = await commonApi.currentUserAxios();
			this.currentUser = currentUser.data.session_user_h5;
			this.shuju()
		},
		methods: {
			shuju(){
			const id = uni.getStorageSync('userId')
				myjiedan.getOrderList(this.status,this.currentUser.id,this.search.page,this.search.limit).then(res=>{
					console.log(res,11111111);
					if(res.data.page.pageNum == 1 && res.data.page.list.length == 0){
						this.$refs.hint.setStatus('noData');
					} 
					let list = res.data.page.list
					this.orderList = this.orderList.concat(list);
					this.search.page++;
					this.totalPage = res.data.page.pages;
				})
			},
			saveFootPrint(stayTime){
				commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"我的需求")
			},
			onRefresh() {
				console.log(this.search.page);
				console.log(this.totalPage);
				if(this.search.page <= this.totalPage){
					this.search.page;
					this.$refs.hint.setStatus('loading');
					console.log("还有下一页" + this.search.page);
					this.shuju();
				}else{
					this.$refs.hint.setStatus('loadingComplete');
					console.log("没有下一页")
				}
			},
			tabsClick(e) {
				console.log(e);
				this.status = e;
				this.str= e==1?"还没有匹配中记录哦~":(e==2?"还没有对接中记录哦~":"还没有已完成记录哦~")
				this.search.page = 1;
				this.search.lastpage = 0;
				this.orderList = [];
				this.shuju(e)
				this.noMoreShow = false;
			},
			
			goTagNews(item) {
				uni.navigateTo({
					url:'/pages/product/tag/tagNewsList?activeIndex=3&tagId=' + item.id,
				})
			},
			toDetail(demandId){
				uni.navigateTo({
					url:'/pages/need/detail/detail?demandId=' + demandId
				})
			}
		},
	}
</script>

<style>
	.vip{
		width: 40rpx;
		height: 30rpx;
	}
	.caigou{
		
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFangSC-Medium;
		font-weight: normal;
		color: #2E2D2D;
	}
	.connaught-style .tabs {
	    height: 90rpx;
		line-height: 90rpx;
	    justify-content: flex-start;
	    background-color: #ffffff;
	    position: fixed;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    z-index: 35;
		display: flex;
	}
	.myOrder .tabs .item {
	    width: 20%;
		
	}
	
	.connaught-style .tabs .item {
	    font-size: 15px;
	    text-align: center;
	    position: relative;
	}

	.connaught-style .tabs .item .span {
	    position: absolute;
	    height: 4rpx;
	    border-radius: 2rpx;
	}
	.myOrder .tabs .item .span {
	    width: 50%;
	    left: 25%;
	    /* bottom: -26rpx; */
	}
	.connaught-style .tabs .item.active {
	    color: #019d9d;
	}
	.connaught-style .tabs .item.active .span {
	    background-color: #019d9d;
	}
	.myOrder .order-module {
	    padding: 28rpx;
	    padding-top: 126rpx;
	    padding-bottom: 0px;
	}
	.myOrder .order-module .orer-data {
	    background-color: #ffffff;
	    border-radius: 18rpx;
	    overflow: hidden;
	    color: #8f9aa8;
	    padding: 0px 28rpx 7rpx;
	    margin-bottom: 28rpx;
		height: 200rpx;
		position: relative;
		
	}
	.myOrder .order-module .orer-data .order-header {
		display: flex;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.myOrder .order-module .orer-data .order-content {
	    padding-top: 25rpx;
	}
	.myOrder .order-module .orer-data .order-content .order-item {
	    flex-wrap: nowrap;
	    align-items: flex-start;
	    margin-bottom: 25rpx;
		display: flex;
	}
	.myOrder .order-module .orer-data .order-content .order-item .main {
	    flex-shrink: 0;
	    width: 121rpx;
	    height: 121rpx;
	    border-radius: 5rpx;
	}
	.myOrder .order-module .orer-data .order-content .order-item .info {
	    width: 100%;
	    flex-shrink: 1;
	    margin-left: 18rpx;
	}
	.myOrder .order-module .orer-data .order-content .order-item .info .title, .myOrder .order-module .orer-data .order-content .order-item .info .price-num{
	    font-size: 13px;
	    color: #333333;
	    line-height: 31rpx;
	    margin-top: 7rpx;
		display: flex;
	}
	.myOrder .order-module .orer-data .order-content .order-item .info .price-num {
	    padding-top: 14rpx;
	}
	.myOrder .order-module .orer-data .order-content .order-item .info .price-num .span {
	    padding: 0 14rpx;
	}
	.myOrder .order-module .orer-data .order-footer .total-btn {
	    padding-top: 14rpx;
	    padding-bottom: 28rpx;
		/* display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap; */
	}
	.myOrder .order-module .orer-data .order-footer .total-btn .total {
	    font-size: 13px;
	}
	.myOrder .order-module .orer-data .order-footer .total-btn .total .span {
	    font-size: 15px;
	    color: #fc5260;
	}
	
	.myOrder .order-module .orer-data .order-footer .total-btn .btn .button {
	    width: 112rpx;
	    height: 56rpx;
	    border-radius: 28rpx;
	    border: 0;
	    margin-left: 18rpx;
	    color: #8f9aa8;
	    background: #f0f6ff;
		text-align: center;
		line-height: 56rpx;
	}
	.myOrder .order-module .orer-data .order-footer .total-btn .btn .button:last-child {
	    background: #029e9d;
	    color: #ffffff;
	}	
	.myOrder .order-module .orer-data .order-footer .stocking {
	    justify-content: flex-start;
	    height: 65rpx;
		line-height: 65rpx;
	    background-color: #fff6e8;
	    border-radius: 9rpx;
	    color: #ffa10e;
	    margin: 28rpx 0px 28rpx;
	}
		
	.myOrder .order-module .orer-data .order-footer .stocking image {
	    width: 31rpx;
	    margin: 0px 12rpx 0px 18rpx;
	}
	.myOrder .order-module .orer-data .order-footer .logistics {
	    flex-wrap: nowrap;
	    padding-bottom: 28rpx;
	    padding-top: 3rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.myOrder .order-module .orer-data .order-footer .logistics .button {
	    flex-shrink: 0;
	    width: 150rpx;
	    height: 56rpx;
	    border-radius: 28rpx;
	    border: 0;
	    margin-left: 18rpx;
	    background: #029e9d;
	    color: #ffffff;
		text-align: center;
		line-height: 56rpx;
	}
	.scroll-view {
	    height: calc(100vh - 10rpx);
	}
	.rz {
		height: 32rpx;
		margin-right: 12rpx;
		width: 60rpx;
		height: 28rpx;
		margin-top: 8rpx;
	}
	.rightpt{
	   width: 99rpx;
	   height: 46rpx;
	   position: relative;
	   top: 20rpx;
	   left: 280rpx;
	}
	.rightImg{
		position: absolute;
		right: 0;
		width: 99rpx;
		height: 46rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		color: #FFFFFF;
	}
	.tags {
		display: flex;
		justify-content: flex-start;
		padding: 0px $interval;
	}
	.attrs{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
		font-size: $font-size-min;
		padding: 0px $interval;
		color: #A1A0A0;
	}
	.t {
		padding: 0px $interval-min;
		line-height: 48rpx;
		background: #f2f3f5;
		border-radius: 8rpx;
		color:#5C5C5C;
		margin-right: 16rpx; 			
		font-size: $font-size-min;
		margin-top: 20rpx;
	}
	.left{
		display: flex; 
		justify-items: center;
		margin-top: 20rpx;
		
	}
		
	.blue{
		width: 6rpx;
		height: 26rpx;
		background: #00b7b3;
		border-radius: 0rpx 200rpx 200rpx 0rpx;
		content: '';
		left: 0px;
		top: 40rpx;
		position: absolute;
	}
	
</style>